<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state和props</title>
    <title>简单购物车</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">

</div>
</body>
</html>
<script type="text/babel">
/*
React里的state和props
props:这是react组件的输入属性,类似于Vue中的props.可以接受外部传入组件内的数据,props是内置的,不需要声明即可使用!
注意:props:里储存的值都是可读的,不可修改!
state:也是react组件中的内部属性,不需要声明即可使用,类似Vue中的data数据源属性.
注意:
a,即可读也可写;
b,不能直接修改State的值,需要调用setState方法进行修改
  c: state 属性虽然不需要我们提前声明,但是需要我们在constructor函数中初始化state!!
    d : 调用setState 方法后,react 会在state 数据修改之后重新调用render方法,让页面重新渲染更新!!

* */
let app=document.getElementById('app');
class  Child1 extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            msg:"你好呀! 马上周末了",
            data1:"在添加一个属性",
            data2:["哇偶",'哈哈',"呵呵"]
        };
    //    初始化组件this指向
        this.changeProps=this.changeProps.bind(this);
        this.changStates=this.changStates.bind(this);
    }
    changStates(){
        // this.state.msg=""  没有报错但是没有效果 ! 深渊巨坑
        this.setState({
            msg:"中国魅惑"
        })
    }
    changeProps(){
        // this.props.msg="aiyouwei"
    }
    render() {
        return <ul>
            <li>显示props的msg:{this.props.msg}</li>
            <li>显示state的msg:{this.state.msg}</li>
            <li><button onClick={this.changeProps}>点击修改props</button> <button onClick={this.changStates}>点击修改state</button></li>
        </ul>
    }
}
ReactDOM.render(<Child1 msg="这是传给props的值"/>,app)
</script>